<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        #header {
        	height: 48px;
        	line-height: 48px;
        	background-color: #e62442;
        	color: #fff;
            overflow: hidden;
        }
        #header .header_left {
        	width: 20%;
            height: 100%;
            float: left;
        	padding-left: 18px;
        	box-sizing: border-box;
            display: -webkit-box;
            -webkit-box-align: center;
        }
        #header .header_left img {
        	height: 20px;
        	display: block;
        }
        
        #footer {
        	width: 100%;
        	padding: 15px;
        	box-sizing: border-box;
        	position: fixed;
        	bottom: 0;
        }
        #footer .btn {
        	width: 100%;
        	height: 44px;
        	line-height: 44px;
        	background-color: #e62442;
        	color: #fff;
        	font-size: 15px;
        	text-align: center;
        	border-radius: 5px;
        }
        .tap_active {
            background-color: rgba(0, 0, 0, 0.1);
        }
        #header .header_center {
            width: 60%;
            height: 100%;
            float: left;
            font-size: 17px;
            text-align: center;
        }
        #header .header_right {
            width: 20%;
            height: 100%;
            display: -webkit-box;
            -webkit-box-align: center;
            -webkit-box-pack: end;
            padding-right: 18px;
            box-sizing: border-box;
        }
        #header .header_right img {
            width: 19px;
            display: block;
        }
    </style>
</head>
<body>
	<header id="header">
    	<div class="header_left" onclick="api.closeWin();" tapmode="tap_active">
    		<img src="../image/back.png">
    	</div>
    	<div class="header_center">路线规划</div>
        <div class="header_right" topmode onclick="toOpenNav();">导航
    </header>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript">
    apiready = function(){
        $api.fixStatusBar(header);
        user_lng = api.pageParam.user_lng;
        user_lat = api.pageParam.user_lat;
        shop_lng = api.pageParam.shop_lng;
        shop_lat = api.pageParam.shop_lat;
        staffLng = $api.getStorage('staff_lng');
        staffLat = $api.getStorage('staff_lat');


        var GoogleMap = api.require('googleMap');
        GoogleMap.open({
            rect: {
                x: 0,
                y: $('#header').height(),
                w: 'auto',
                h: api.frameHeight
            },
            // showUserLocation: true,
            zoomLevel: 16,
            center: {
                lon: staffLng,
                lat: staffLat
            },
            fixedOn: api.frameName,
            fixed: true
        }, function(ret) {
            if (ret.status) {
                addImg(GoogleMap,staffLng,staffLat,shop_lng,shop_lat,user_lng,user_lat);
            }
        });
    };

    function toOpenNav () {
        var status = api.pageParam.status;
        if(status == 3){
            // 显示到商家的图标
            var destinationLng = shop_lng;
            var destinationLat = shop_lat;
        }else{
            // 显示到用户的图标
            var destinationLng = user_lng;
            var destinationLat = user_lat;
        }
        api.openFrame({
            name: 'choose_nav_dialog',
            url: 'choose_nav_dialog.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            pageParam:{
                destinationLng : destinationLng,
                destinationLat : destinationLat,
                staffLng : staffLng,
                staffLat : staffLat
            },
            bounces: false,
        });
    };

    function addImg (GoogleMap,staffLng,staffLat,shop_lng,shop_lat,user_lng,user_lat) {
        var status = api.pageParam.status;
        if(status == 3){
            // 显示到商家的图标
            var showLng = shop_lng;
            var showLat = shop_lat;
        }else{
            // 显示到用户的图标
            var showLng = user_lng;
            var showLat = user_lat;
        }
        GoogleMap.addAnnotations({
            annotations: [{
                id: 1,
                lon: staffLng,
                lat: staffLat,
                /*icons: ['widget://image/start.png'],
                icon: ['widget://image/start.png'],*/
            }, {
                id: 2,
                lon: showLng,
                lat: showLat,
                /*icons: ['widget://image/end.png'],
                icon: ['widget://image/end.png'],*/
            }],
            // icons: ['widget://'],
            draggable: false,
            timeInterval: 2.0
        });

        var a = showLat+','+showLng;
        var b = staffLat+','+staffLng;
        // var a = '22.28294142,113.56998682';
        // var b = '22.284887214212013,113.5640324839517';
        // alert(a);
        GoogleMap.searchRoute({
            id:1,
            origin: b,
            destination: a,
            mode:'walking'
        },function(ret, err){
            if(ret){
                GoogleMap.drawRoute({
                    id:1,
                    styles:{
                        width:3,
                        color:'#e62442'
                    }
                });
            }
        });
        
    };

</script>
</html>